<template>
  <el-form ref="form" :rules="rules" :model="currentGift" label-width="100px" class="demo-form">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="currentGift.title"></el-input>
          </el-form-item>
          <el-form-item label="子标题" prop="subTitle" style="width: 300px;">
            <el-input v-model="currentGift.subTitle"></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="category">
            <el-autocomplete
              class="inline-input"
              v-model="currentGift.category"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item >
          <el-form-item label="图片" prop="slides" >
            <image-uploader v-model="slides" :multi="10" :max-size="10240" :width="uploadImgAttr.width" :height="uploadImgAttr.height"></image-uploader>
          </el-form-item>
          <el-form-item label="原价" prop="orgPrice" style="width: 300px;">
            <el-input-number v-model="currentGift.orgPrice" :min="0" :precision="2" :step="0.01"></el-input-number>
          </el-form-item>
          <el-form-item label="库存" prop="repertory" style="width: 300px;">
            <el-input-number v-model="currentGift.repertory" :min="0" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="兑换积分" prop="minScore" style="width: 300px;">
            <el-input-number v-model="currentGift.minScore" :min="0" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="详情" prop="detailContent">
            <!--<editor v-model="currentGift.detailContent" height="300px"></editor>-->
            <u-editor v-model="currentGift.detailContent" ></u-editor>
          </el-form-item>
          <el-form-item>
            <span style="float: right;">
               <el-button type="primary"  @click="save('form','EDIT')">保存</el-button>
            <el-button type="primary"  @click="save('form','ONSALE')">发布 </el-button>

            <el-button @click="back">返回</el-button>
               </span>
          </el-form-item>
        </el-card>

      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import Editor from "@/components/editor";
import UEditor from "@/components/u-editor";
import ImageUploader from "@/components/image-uploader";
import MediaUploader from "@/components/media-uploader";
import Status from "@/libs/status";
import { checkNumber } from "@/libs/checkRules";
export default {
  props: {
    isClose: Boolean
  },
  created() {},
  mounted() {
    this.$watch("currentGift", val => {
      if (val && val.slide) {
        this.slides = val.slide.join(",");
      } else {
        this.slides = "";
      }
    });
    this.$store.dispatch("getAllCategoryS").then(res => {});
  },
  computed: {
    ...mapGetters({
      currentGift: "currentGift",
      categories: "categories",
      uploadImgAttr: "uploadImgAttr"
    }),
    categoryData() {
      if (this.categories) {
        var tem = [];
        this.categories.map((item, index) => {
          tem.push({ value: item });
        });
        return tem;
      } else {
        return [];
      }
    }
  },
  data() {
    return {
      slides: "",
      GiftTypes: Status.GiftTypes,
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        category: [{ required: true, message: "请输入分类", trigger: "blur" }],
        orgPrice: [{ required: true, message: "请驶入原价", trigger: "blur" }],
        detailContent: [
          { required: true, message: "请输入详情", trigger: "blur" }
        ],
        repertory: [
          { required: true, message: "请输入库存", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ],
        minScore: [
          { required: true, message: "请输入兑换积分", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.categoryData;
      console.log(restaurants);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    save(formName, status) {
      console.log(this.slides);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.currentGift.status = status;
          this.currentGift.slide = this.slides.split(",");
          this.$store
            .dispatch("addOrUpdateGiftS", this.currentGift)
            .then(ret => {
              this.$notify({
                title: "添加成功",
                type: "success"
              });
              this.$store.dispatch("getAllCategoryS").then(res => {});
              this.back();
            });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    }
  },
  components: { Editor, ImageUploader, MediaUploader, UEditor }
};
</script>
<style>
</style>
